{% extends 'layout.html' %}

{% block content %}
<style>
  img {
    width: 130px;
    height: 100px;
  }

  /* 在 /static/css/myself.css 文件中 */

  /* 购物车右上角 */
  .cart_goods_show {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .cart_goods_show li {
    margin: 4px;
    padding: 2px;
    flex: 0 0 25%;
  }

  /* 商品列表 */
  .goods_list {
    display: flex;
    flex-wrap: wrap;
    margin: 13%;
    padding: 12px;
  }

  .goods_list li {
    margin: 4px;
    padding: 2px;
    flex: 0 0 25%;
  }

  /* 商品类型列表 */
  .goods_type_list {
    display: flex;
    flex-wrap: wrap;
  }

  .goods_type_list li {
    margin: 10px;
    flex: 0 0 25%;
  }
</style>
<div id=content>

  <head>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/myself.css" />

  </head>

  <div>
    <!-- <a href="https://www.bilibili.com/video/BV1uz411i7KK/?p=23&amp;spm_id_from=pageDriver&amp;vd_source=1d8d79dd052d165a3d1bc560b59b5a0a">老师授课</a> -->
    <div class="navbar clearfix">
      <!-- <h2>------全部商品分类2-----</h2> -->
      <span></span>

      <ul class="subnav"
        style="display: flex;justify-content: center;align-content:flex-start;margin-left:auto;margin-right:auto;">
        <!-- ##flex-wrap:wrap; -->
        {% for cag in categories %}
        <li> <a href="/goods/?cag={{cag.id}} &amp;amp;page=1" class="cag.cag_css">
            <p>{{cag.cag_name}}</p>
            <img src="/static/{{cag.cag_img}}" style="width: 60px;height: 50px;  border-radius: 11px 11px 11px 11px;
                    border: 1px solid#ff008c;">
          </a> </li>

        {% endfor %}
      </ul>
    </div>
  </div>
  <!-- 购物车  右上角 -->
 <h3> <a href="/cart/show_cart/">我的购物车 {{ cart_goods_count }}件</a> </h3>   
  <!-- <ul class="cart_goods_show">
    {% for cart_goods in cart_goods_list %}
    <li>
     
      <img src="/static/goods/4.png" alt="商品图片">
      {{ cart_goods.goodsname }}
      <div>{{ cart_goods.goods_num}}</div>
    </li>
    {% endfor %}
  </ul> -->
  <!-- --------categories--------------- -->


  <!-- goods_data遍历 -->
  <div class="main_wrap clearfix">
    <div class="sort_bar"> </div>


    <ul class="goods_type_list clearfix">
      <!-- goods_data 变为-page_data-->
      {% for goods in page_data %}

      <li>
        <a href="/detail/?id={{goods.id }}"><img src="/static/goods/{{goods.goods_img}}" alt=""></a>
        <div class="operate">
          <h4><a href="/detail/?id={{goods.id }}">{{ goods.goods_name }} </a></h4>
          <span class="prize">￥{{ goods.goods_price }}</span>

        </div>
      </li>
      {% endfor %}

    </ul>
    <!-- 分页 -->
    <div class="pagenation">

      {% if page_data.has_previous %}
      <a href="?cag={{cag_id}}&amp;page={{ page_data.previous_page_number}}">上一页</a>
      {% endif %}

      {% for index in paginator.page_range %}
      <a href="?cag={{cag_id}}&amp;page={{ index }}">{{ index }}</a>
      {% endfor %}

      {% if page_data.has_next %}
      <a href="?cag={{cag_id}}&amp;page={{ page_data.next_page_number}}">下一页</a>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}